<template>
  <div class="home">
    <KitItem type="LibLabel"></KitItem>
    <ElButton>sad</ElButton>
    <div class="scroll-container">
      <SwiperContainer ref="scrollRef">
        <div class="flex-shrink item" v-for="(item,i) of lists" :key="i">{{ item }}</div>
      </SwiperContainer>
    </div>
    <ElButton @click="onScroll(false)">《</ElButton>
    <ElButton @click="onScroll(true)">》</ElButton>
  </div>
</template>

<script lang="ts">
import {defineComponent, onMounted, ref} from 'vue';
import Container from "@/layout/Container.vue";
import {useIsCollapse} from "@/layout/hooks";
import KitItem from "@/kits/skeleton/KitItem";
import SwiperContainer from "@/components/swiper/SwiperContainer.vue";


export default defineComponent({
  name: 'Home',
  components: {
    Container,
    KitItem,
    SwiperContainer,
  },
  data() {
    return {
      lists: new Array(20)
    }
  },
  setup() {
    const scrollRef = ref()
    const onScroll = (isLeft = true) => {
      if (!scrollRef.value) {
        return;
      }
      scrollRef.value.scrollLeft(200, isLeft)
    }

    return {
      scrollRef,
      onScroll,
      ...useIsCollapse(),
    }
  }
});
</script>
<style lang="scss" scoped>
.scroll-container {

  .item {
    margin: 10px;
    background-color: #5FB878;
    width: 100px;
    height: 100px;
  }
}
</style>
